<script setup>
import {ref, reactive, watch} from 'vue';
/*todo
    数据监听
    1.watch监听
    2.watchEffect监听
 */
let firstName = ref("")
let lastName = reactive({
  name: ""
})
let fullName = ref("")
//监听ref响应式数据
watch(firstName, (newValue, oldValue) => {
  //当firstName发生改变时执行该函数，默认的参数newValue表示更新之后的值，oldValue表示原值
  console.log(`${oldValue}-->${newValue}`);
  fullName.value = newValue + lastName.name;
})
//监听reactive响应式数据
watch(() => lastName.name, (newValue, oldValue) => {
  console.log(`${oldValue}-->${newValue}`);
  fullName.value = firstName.value + newValue;
})
</script>

<template>
  <div>
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="lastName.name"><br>
    {{ fullName }}
  </div>
</template>

<style scoped>
th, td {
  width: 100px;
}

td {
  text-align: center;
}
</style>
